Lenguaje Etiqueta (tags) Descripcion Convenciones de programación 


HTML [1] estructura/ inform 1- Todos los codigos tienen que escribirse en minuscula 
<meta charset="UTG-8"> [2] Definicion del conjunto de dato "UTF- contenido 2- No se puede usar la "ñ" 
<ht> <ht> Titulo principal contenido 3-Al final de una instruccion debe finilizar con ";", para indicar que ahi termina la instruccion 
<br> Espacio abajo contenido 4- Siempre se debe utilizar minusculas para definir variables 
<h> Crea lineas horizontales dentro del texto. contenido 5- Las variables deben tener nombres representativos y explicitos. [3] 
<big> </big> Hace las letras mas grandes. Cambio de fuente. contenido 6- Las funciones siempre deber opucar verbos, para cuando lo vea otra persona el codigo pueda saber de que trata el codigo. [4] 
<input/> cuadro de texto contenido 7- Las instrucciones dentro de la funcion deben tener identacion (TAB), para una lectura correcta. 
<button><button/> boton contenido 8- Las funciones deben ser objetivas, no es bueno ponerle muchas instrucciones. 
Vincular texto con algun enlace. Crea enlaces 
<a href=" "> </a> a otras paginas. contenido 9- Hay que evitar el loop infinito cuando usamos while. 
<canvas> </canvas> Pizarra en donde se puede dibujar lo que quierai contenido 10- Se puede ejecutar una funcion si parentesis. Trayendo todo el codigo. Util cuando unsamos botones, para tres la funcion cuando clickeamos el boton. 
height= "" Ancho de la pizarra contenido 11- Booleano: un boolean es un dato lógico que solo puede tener los valores, true or false. 
width ="" Altura de la pizarra contenido 12- Array: permite que una variable tenga muchos valores, vector. 
<p>parrafo</p> Inserta un parrafo contenido 13- Las funciones siempre llevan parentesis *( ) " 
<strong>negrita</strong> texto en negrita contenido 14-En HTML se puede colocar los tag en cascadas. Anidando atributos 
<em>cursivaclem> texto en cursiva estructura/ inforn 15- Identar es cuando hacemos TAB para estructurar bien el codigo. 
informa al navegador el tipo de documento que x 
<IDOCTYPE html> [5] en este caso HTMLS estructura/ inforn 16- En CSS el " ; * es el separador de las propiedades. 
<html></html> [6] Declaracion de la etiqueta html estructura/ inforn 17- ALT+Z ajusta el texto a la pantalla. 
<html lang="es"> Define el lenguage de la pagina estructura/ inforn 18-Con la propiedad required le decimos al navegador que un input es obligatorio. 
<tile>titulo</title> Titulo de la pagina. Como se vera en el navegad estructura/ inforn 19-Con la propiedad placeholder nos permite dar una ayuda al usuario con los input dando un ejemplo. 
<head></head> Separa las etiquetas informativas del contenido. estructura/ inforn 20-Propiedad checked marca una casilla por defecto, 
<body></body> [7] Separa las etiquetas de contenido. estrcutura 21-Siempre en las img se acostumbra usar la propiedad alt que referencia un texto alternativo. [8] 
Divide los contenidos en bloques. Sirve 
<div> </div> [9] para organizar mejor la estructura del codigo. 22-Se utiliza id para alterar comportamientos y class para alterar estilos 
Dentro de <head> atribulle una propiedad 
<style></style> [10] a todos los tag que indiquemos. 
Etiqueta de referencia. Para vicularla con una 
<link rel="styleshet" href="style.css archivo CSS. Referencial 
<img src=" "> [12] Llama una imagen a la pagina. 
<ul> </ul> lista no ordenada 
<ol> </ol> lista ordenada 
List ídem. Se coloca dentro de <ul>. item 
<li> <i> de la lista 
<header></header> Encabezado / etiqueta de contenido contenido 
Etiqueta de estructura para el 
<nav></nav> panel de enlaces de navegacion. 
<main></main> Representa el contenido principal del <body> semantic 
<footer></footer> Representa el contenido del pie de pagina semantica 
<form></form> crea un formulario 


permite crear una cajita de texto. Entrada de 
<input type="text"> [13] datos 


crea una etiqueta. es una etiqueta para la entrad 
<label></label> de datos del input. contenido 


<input type="summit" value="nomt Crea un boton de enviar 
<textarea cols="" rows="" id=""></1 Caja de text que puede agrandarse o achicarse 


<input type="radio" name=" Value 
ld=""> [14] Boton selector radio. 


<input tye= checkbox> cuadrito de tildar. 
<select><option></opcion></selec Crear una lista de opciones de seleccion. 


El elemento fieldset (grupo de campos) permite 
<feldset></fleldset> [15] organizar en grupos los campos de un formularic estructura 
El elemento <legend> (leyenda) crea un título 
para un grupos los campos (<fieldset>) de un 


<legend></legend> [16] formulario. 
<table></table> Crea una tabla 
<tr></tr> [17] creta un linea (filas) 
<td></td> [18] crea una celda en donde se puede llenar el conti 
<thead></thead> Estructura- cabeza de la tabla estructura 
<tbody></tbody> Agrupa el cuerpo de la tabla estructura 
<th></th> Celdas del encabezado 
<tfoot></tfoot> Pie de pagina de la tabla estructura / semantica 
Divide el contenido del codigo en 
<section></section> [19] secciones estructura / contenido 
<iframe></iframe> Crea ventanas de contenido 
css *En CSS se puede combinar selectores de diferentes etiquetas de HTML para definirle a una etiqueta especifica una propiedad de estilo. 
style="font-size: n px;" [20] cambia el tamaño de la fuente del texto. propidad “En el archivo CSS se llama selector de etiqueta cuando llamamos un tag para agregarle propiedades. 
style="textalign: center;" [21] alinea el texto en el centro de la pagina *CSSinline es cuendo colocamos las propiedades en las lineas de cada tag en el archivo html 
background: #CCCCCC Color del fondo. *Class permite reutilizar el style. Los identificadores no, ya que son unicos. solo se puede usar una sola vez. 
color: [22] cambia el color del texto https://unicode-table.com/es/ [23] 
Crea un identificador para llamarlo en el archivo 
ido CSS. Se debe llamar con # y el nombre del id. *Todos los formularios estan formados por label, input text y un input summit 
padding: n px ajusta el margen interno del elemento *Colocamos un id al input y asociamos ese id al atributo for del label 
margin: n px [24] ajusta el margen externo del elemento *En CSS se puede aplicar el mismo estilo separando con una coma "," a diferentes items. Pueden ser selectores, ids o clases. 
class=" " [25] Da una clase a una etiqueta. *En CSS los id tiene mas prioridad que las clases. Luego de las clases siguen las etiquetas. 
Ocupa solo el espacio de su contenido. Los lado 
display: inline-block pueden ser ajustados. *Las propiedades inline tienen mucho mas peso que los ids 
vertical-aling alineamiento vertical. http://mobileinputtypes.comí [26] 
href referencia una pagina. https://fonts.google.com/ [27] 
font-weight: [28] Peso de la fuente *Pseudo-clases permite poder cambiar el el style de uno o varios elementos seleccionados sin alterar los demas. (first-child, last-child, nth-child(n)) 
posiotion Cambia la posicion del punto inicial de donde *Pseudo-elemento afecta a todos los elementos de un clase 
box-sizing tamaño de la caja. 
border [29] crea un borde en el elemento o Hapana ocionar el frio Ea 
border-radius redondea las esquinas de los bordes 
etiqueta:hover{ Sirve para capturar el movimiento del raton 


selector:active{ Captura el click del mouse. 


background: url() 

border: none 

transition: ns(seg) + propiedad 
cursor: pointer; 


transform 


transform: scale(x); 


float:left 
clear 


permite usar una imagen como fondo de pagina. 
Quita los bordes 

Las transiciones por el hover demora n segundo: 
Cambia el cursor a la manito seleccionando. 


La propiedad transform sirve para cambiar el t 
amaño o el comportamiento del elemento. 


Utilizamos la propiedad transform: scale() para 
aumentar un elemento proporcionalmente. 


Tanto el float:left como el float: right sirven para 
que el elemento se destaque en la pantalla, la 
superficie del elemento continúa siendo utilizada 
y los otros elementos de texto o elementos en 

línea se posicionan alrededor de él. 


Limpia el float 


background:linear-gradient (black, Crea un degrade de colores 
background:radial-gradient (black, Degrade circular 


titulo-principal::first-letter 
content: "" 
Propiedad:Calc:() 
Opacity 

Color: rgba(0,0,0,0.3) 


box-shadow (hori verti difuminado 
expancion color) 


box-shadow: inset 
text-shadow( 0 0 npx color) 


Permite alterar la primera letra de un titulo Pseudo-elemento 
Añade contenido al elemento. 

calcula valores 

altera la opacidad del elemento 


el ultimo parametro es la opacidad 


crea una sombra en el elemento. 
sombra interna 
sombre de texto 


JavaScript [30] 


<spript> 
alert("") 
documentawrite(* ") [31] 


document.write( ) 
document.write(" " + " ") [32] 


var... = [33] 
Math.round () 
function ...() Q [34] 
7) 


return [35] 


prompt() 
parselnt() 

10 

(true) 

(false) 
Math.random() 


else (X 
88 


while () [36] 

for (variable inicial; condicion; 
imcrementador ) [37] 

+ 

break 
documento.querySelector("input") 
documento.querySelector("button" 
input.value 

button.onclick [38] 


document.querySelecto(" ") 
input.focus 

value 

[a, b, €... ] [39] 
*variablevector” length 
«push 


console.log() 

getContext("2d") 

fillrect() 

beginPath( ) 

arc(x,y.radio,ang inc, ang final ) 
„lineTo( ) 

fillinc, inc, radio, angulo inicial, ar 


font="" 
filIText(texto, x, y) 
onclick 


funcion(sin parentesis) 
new Date( ) 

checkTime() 

-getHours() 

getMinutes() 

getSeconds() 

pageX 


Antes de iniciar para aclarar el lenguaje que 
se utilizará 


Pop-up, sale antes de cargar la pag 
Permite utilizar HMTL dentro de JavaScript 


Lo reconoce como si fueran numeros, hasta 
incluso funciona como calculadora. 


Concatenación de las palabras 


Se utiliza para indicar en que momento esta 
terminando una instruccion. 


Declaracion de variable 

retorna el valor de un número redondeado al entero más cercano. 
Crea funciones 

Crea comentarios 


Este de debe poner en las funciones en donde 
hay calculos de diferentes variables. Es el 
resultado final que mostrara la funcion. 

Retoma un valor despues de ejecutar una accior 


Sirve para interactuar con el usuario. 
Obteniendo un valor. 


Condicional 
verdadero 

falso 

Lanza un numero aleatorio entre 0 y 1 
No igual 

igual 

sino, en caso de que if no sea. 


mientras, sirve para repetir una secuencia 
hasta que de false. 


repetir un ciclo 
añade un mas 1 

termina el while. 

trae el valor de input a JavaScript 
llama al boton a JavaScript 

trae el valor de input a JavaScript 
le da una accion al clickear el boton 


Trae el valor de una etiqueta (tag) de html a 
JavaScript. 


Enfoca el cursor en la casilla input. 
llama el valor de la etiqueta llamada. 

defini un vector. 

Sirve para abarcar toda la longitud de la variable 
Permite ingresar un valores a un array. 


permite visualizar valores de variables en la 
consola del desarrollador. 


transporta el contenido de la pantalla en 2d 
dibujar 

Inicia un nuevo camino en el canvas. 

Para graficar cincurferencias. 

Traza la línea al punto señalado. 

Rellena lo diseñado con un color. 


Selecciona la fuente de texto para utilizar en el 
canvas. 


Dibuja en el canvas un texto en la posicion x,y. 
llama a una funcion al momento de clickear. 
Crea una variable de tipo date 

Toma el tiempo 

Toma la hora 

Toma los minutos 

Toma los segundos 

Posicion x en la pagina 


Selector avanzado de CSS 

*Selector > , para acceder a los hijos de determinado elemento. 

*Selector +, para acceder al primer hermano de determinado elemento. 

*Selector ~, para acceder a todos los hermanos de determinado elemento. 

*Selector not, para acceder a los elementos, excepto algunos. elector not, para acceder a los elementos, excepto algunos. 


main > p { } 


e Selector + , para acceder al primer hermano de determinado elemento. Por 


ejemplo, para acceder el primer p después de una img : 


img + p( 
} 


e Selector ~ , para acceder a todos los hermanos de determinado elemento. 


Por ejemplo, para acceder todos los p después de una img : 


img ~p { 
} 


e Selector not , para acceder a los elementos, excepto algunos. Por ejemplo, 
para acceder a todos los p dentro de main excepto el p que tiene id 


missao : 


e Cómo hacer cuentas con CSS, con la propiedad calc 


pageY 
offsetLeft 

ofísetTop 
Math.PI 
clearRect(x,y,ancho,alto) 


setinterval(funcion, intervalo) 
Math.fioor() 
(088 ()) 


Posicion y en la pagina 
Espacio a la izquierda del codigo 
Espacio en la parte de arriba del codigo. 


Limpia todo lo que esta en el canvas 


Crea un intervalo en donde se ejecuta una funcic 
en el tiempo fijado 


Redondea para abajo. 
Cumplir 2 condiones. 


[1] Los codigos HTML son mas estaticos que los de JavaScript 


[2] Define el diccionario UTF-8. Informa los caracteres especiales (como la ñ) y acentos. 
Es un diccionario de palabras. 


Pasa informacion del encoding(diccionario) de la pagina al navegador. 
Meta: etiqueta 
charset: propiedad 


[3] Esto es por si otra persona ve nuestro codigo puede saber de que trata la variable. 


[4] Es bueno usar nombres de facil entendimiento, por si en el futuro se necesita hacer mantenimiento, saber de que trata la funcion. 


[5] Informa al navegador sobre cual version de html estamos usando. 


[6] Importante para que el navegador reconozca que lo que esta recibiendo es html. 


[7] Esto sirve para cuando se de mantenimiento a la pagina web. El que realice mantenimiento pueda identificar bien la estructura de la pagina. 


[8] El alt no es una etiqueta, es una propiedad que usamos para proporcionar una alternativa a las imágenes. 


[9] Una <div> se usa con el sentido de dividir el contenido HTML solo con fines visuales o para encapsular un bloque específico para aplicar algún estilo 
CSS. 


[10] Ej: 
p{ 


text-align: center; 


[11] Etiqueta (tag): link 
Propiedad: rel (relacion) 
Propiedad: href (referencia) 


[12] img: etiqueta imagne 
scr: fuente (de donde va a llamar la img) 


[13] Siempre que se crea un input debe ir asociado a un <label> 


para relacionar mejor usar id=" " y for= 
[14] Se utiliza la propiedad name para indicar la seleccion de un solo radio. 

En input radio se acostumbra a dar un value, es el valor del input 

[15] La etiqueta <fieldset> se usa para crear una división en nuestro formulario, con uno o más <input>. 
[16] Es la etiqueta <legend> que usamos para un título de un grupo de campos en cualquier formulario. 
[17] Utilizamos la etiqueta <tr> para marcar la fila de una tabla 

[18] Utilizamos la etiqueta <td> para marcar una columna de una tabla. 

[19] Para un bloque donde el contenido tiene el mismo significado, el mismo sentido, usamos una <section> 


[20] El tamaño de la fuente viene por defecto 16px 


Propiedad: font-size 
Valor: n px 


[21] Propiedad: text-align 
Valor: center 


RGB: rgb(_,_,_) 
name: red or green....etc 


[23] pagina para buscar el codigo de los caracteres especiales. 


[24] tiene cuatro parametros: 
arriba derecha abajo izquierda 


[25] Utilizamos class cuando queremos repetir un style en varios elementos. 


[26] Aqui se puede ver los distintos tipos de input y para que sirven. 
[27] para importar fuentes 

[28] normal: texto normal 

bold: negrita 

lighter: finito 


[29] 2px solid #000000 
tamaño style color 


[30] Es un codigo mas dinamico 
[31] Tambien muestra texto 
[32] En caso de que un lado no tenga comillas y tenga numeros, Java lo interpreta como letras. Esto es la suma de dos textos. 


[33] Se le puede dar mas de un valor a la variable. El valor es tomado secuencialmente. Y por convencion siempre se la define al principio del codigo. Las 
variables pueden ser tanto numeros como palabras. Para palabras debe estar entre " " 


[34] Siempre se debe abrir y cerrar llaves. Las llaves indican el inicion y el final de la funcion. 
Dentro de los parentesis se puede crear un parametro para usar al llamar la funcion. 


[35] Finaliza la ejecución de la función y especifica un valor para ser devuelto a quien llama a la función. 
[36] while es una sentencia. 


[37] La declaración for se divide en tres partes que están separadas por un punto y coma. La primera se usa para declarar la variable que usaremos como 
contador, la segunda para la condición de repetición y la última para el incremento de la variable contador. 


[38] Hace de los parentesis de la funcion que la asociamos. Para ejecutarla. 


[39] El primer elemento de array siempre tiene un valor igual a O. Por eso se dice que el indice comienza en 0, 1, 2,... 


